<template>
  <div id="app">
    <div class="img_box">
      <img alt="Vue logo" src="./assets/logo.png" />
    </div>
    <div>
      <input type="text" v-model="message" />
    <button @click="sendMessage">查询</button>
    </div>
    <div>{{userInfo.name}}</div>
    <div>
      <ul>
        <li v-for="(item,index) in list" :key="index" class="item">
          <div class="content">{{item.name}}</div>
          <div class="delete">
            <button @click="deleted(item)">删除</button>
          </div>
          <div class="change">
            <input type="text" v-model="item.name" />
            <button @click="updata(item)">修改</button>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <input type="text" v-model="username" @keydown.enter="add" />
      <button @click="add">新增</button>
    </div>
    <div></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      message: "",
      userInfo: {name:''},
      list: [],
      username: "",
      changename: ""
    };
  },
  mounted() {
    this.Getall();
  },
  methods: {
    sendMessage() {
      axios({
        url: `http://localhost:3000/detail/${this.message}`
      }).then(res => {
        console.log(res);
        this.userInfo = res.data.user;
      });
    },
    // 查询
    Getall() {
      axios({
        url: `http://localhost:3000/list`
      }).then(res => {
        console.log(res);
        this.list = res.data.list;
      });
    },
    // 增加
    add() {
      axios({
        url: "http://localhost:3000/create",
        method: "post",
        params: {
          name: this.username
        }
      }).then(res => {
        console.log(res);
        this.Getall();
        this.username=''
      });
    },

    // 删除
    deleted(item) {
      let id = item.id;
      axios({
        url: `http://localhost:3000/delete/${id}`
      }).then(res => {
        console.log(res);
        this.Getall();
      });
    },
    updata(item) {
      axios({
        url: "http://localhost:3000/updata",
        method: "post",
        params: {
          id: item.id,
          name: item.name
        }
      }).then(res => {
        console.log(res);
        this.Getall();
      });
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
}
img {
  height: 30px;
  width: 30px;
  display: block;
  position: absolute;
}
.img_box{
  height: 50px;
  background: #e6d2d5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.item {
  background: #e3b4b8;
  margin-top: 10px;
  cursor: pointer;
  list-style: none;
  display: flex;
}
.content {
  flex: 2;
}
.delete {
  flex: 1;
}
.change {
  flex: 1;
}
button{
  border: none;
}
</style>
